<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>aixin</title>
    <style>
      #a1 {
        position: absolute;
        top: 1000000000000000;
        left: 1000000000000000;
      }
      #a2 {
        position: absolute;
        top: 1000000000000000;
        left: 1000000000000000;
      }
      #a3 {
        position: absolute;
        top: 1000000000000000;
        left: 1000000000000000;
      }
      #a4 {
        position: absolute;
        top: 1000000000000000;
        left: 1000000000000000;
      }
      #a5 {
        position: absolute;
        top: 1000000000000000;
        left: 1000000000000000;
      }
      #a6 {
        position: absolute;
        top: 1000000000000000;
        left: 1000000000000000;
      }
      #a7 {
        position: absolute;
        top: 1000000000000000;
        left: 1000000000000000;
      }
      #a8 {
        position: absolute;
        top: 1111111110;
        left: 11111111111110;
      }
      #a9 {
        position: absolute;
        top: 11111111111111111110;
        left: 11111111111111111110;
      }
      #a10 {
        position: absolute;
        top: 11111111111111111110;
        left: 11111111111111111110;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      var kaishi = 0; //1为已开始 2为未开始
      var jieshu = 0; //10为结
      var time = {};
      function start() {
        /*for(var i = 1;i<10;i++){
        var css=document.getElementById('a'+i)
 /*window.onload = function() {
    var image = document.getElementById('a1');
    var container = document.querySelector('.container');
 
    // 获取容器的宽度和高度
    var containerWidth = container.offsetWidth;
    var containerHeight = container.offsetHeight;
 
    // 获取图片的宽度和高度
    var imageWidth = image.offsetWidth;
    var imageHeight = image.offsetHeight;*/

        // 设置图片的随机位置*/
        /*var css = document.getElementById("a1");
        css.style.top = Math.random() * 100 + "px";
        css.style.left = Math.random() * 100 + "px";*/

        //var kaishi=1
        kaishi = 1;
        console.log(kaishi);
        var snow = new Date();
        time.shours = snow.getHours();
        time.sminutes = snow.getMinutes();
        time.sseconds = snow.getSeconds();
        //console.log(snow, 6, shours, 7, sminutes, 8, sseconds, 9);
        var myButton = document.getElementById("kaishi");
        myButton.style.display = "none";
        if (kaishi == 1) {
          var button1 = document.getElementById("a1");
          button1.addEventListener("click", function () {
            var myButton1 = document.getElementById("a1");
            myButton1.style.display = "none";
            jieshu++;
          });
          var button2 = document.getElementById("a2");
          button2.addEventListener("click", function () {
            var myButton2 = document.getElementById("a2");
            myButton2.style.display = "none";
            jieshu++;
          });
          var button3 = document.getElementById("a3");
          button3.addEventListener("click", function () {
            var myButton3 = document.getElementById("a3");
            myButton3.style.display = "none";
            jieshu++;
          });
          var button4 = document.getElementById("a4");
          button4.addEventListener("click", function () {
            var myButton4 = document.getElementById("a4");
            myButton4.style.display = "none";
            jieshu++;
          });
          var button5 = document.getElementById("a5");
          button5.addEventListener("click", function () {
            var myButton5 = document.getElementById("a5");
            myButton5.style.display = "none";
            jieshu++;
          });
          var button6 = document.getElementById("a6");
          button6.addEventListener("click", function () {
            var myButton6 = document.getElementById("a6");
            myButton6.style.display = "none";
            jieshu++;
          });
          var button7 = document.getElementById("a7");
          button7.addEventListener("click", function () {
            var myButton7 = document.getElementById("a7");
            myButton7.style.display = "none";
            jieshu++;
          });
          var button8 = document.getElementById("a8");
          button8.addEventListener("click", function () {
            var myButton8 = document.getElementById("a8");
            myButton8.style.display = "none";
            jieshu++;
          });
          var button9 = document.getElementById("a9");
          button9.addEventListener("click", function () {
            var myButton9 = document.getElementById("a9");
            myButton9.style.display = "none";
            jieshu++;
          });
          var button10 = document.getElementById("a10");
          button10.addEventListener("click", function () {
            var myButton10 = document.getElementById("a10");
            myButton10.style.display = "none";
            jieshu++;
          });
        }
      }

      function end() {
        console.log(jieshu);
        if (jieshu == 10) {
          var myButton = document.getElementById("jieshu");
          myButton.style.display = "none";
          var enow = new Date();
          time.ehours = enow.getHours();
          time.eminutes = enow.getMinutes();
          time.eseconds = enow.getSeconds();
          console.log(time);
          var ehours = time.ehours;
          var eminutes = time.eminutes;
          var eseconds = time.eseconds;
          var shours = time.shours;
          var sminutes = time.sminutes;
          var sseconds = time.sseconds;
          console.log(ehours, eminutes, eseconds, shours, sminutes, sseconds);
          if (ehours == shours) {
            if (eminutes == sminutes) {
              var yongshi = eseconds - sseconds;
            } else {
              var yongshi = (eminutes - sminutes) * 60 + eseconds - sseconds;
            }
          } else {
            var yongshi =
              (ehours - shours + eminutes - sminutes) * 60 +
              eseconds -
              sseconds;
          }
          console.log(yongshi);
          alert("你的用时：" + yongshi + "秒");
        } else {
          alert("你还未完成");
        }
      }
    </script>
  </head>
  <body>
    <button id="a1">
      <img src="1.jpg" width="100" height="100" id="1" />
    </button>
    <button id="a2">
      <img src="1.jpg" width="100" height="100" id="2" />
    </button>
    <button id="a3">
      <img src="1.jpg" width="100" height="100" id="3" />
    </button>
    <button id="a4">
      <img src="1.jpg" width="100" height="100" id="4" />
    </button>
    <button id="a5">
      <img src="1.jpg" width="100" height="100" id="5" />
    </button>
    <button id="a6">
      <img src="1.jpg" width="100" height="100" id="6" />
    </button>
    <button id="a7">
      <img src="1.jpg" width="100" height="100" id="7" />
    </button>
    <button id="a8">
      <img src="1.jpg" width="100" height="100" id="8" />
    </button>
    <button id="a9">
      <img src="1.jpg" width="100" height="100" id="9" />
    </button>
    <button id="a10">
      <img src="1.jpg" width="100" height="100" id="10" />
    </button>
    <button onclick="start()" id="kaishi">开始游戏</button>
    <button onclick="end()" id="jieshu">结束游戏</button>
  </body>
</html>
